<template>
  <div class="zhsjbox">
    <div class="con-t">
      <div class="con-tit">Merchant Mgmt</div>
      <div class="seach-box">
        <div class="search-name">
          <div class="search-name-t">Name:</div>
          <div class="search-name-b">
            <el-input
              v-model="namekey"
              type="text"
              placeholder="请输入名称关键词"
            />
          </div>
        </div>
        <div class="search-name">
          <div class="search-name-t">Freeze the user:</div>
          <div class="search-name-b">
            <el-select
              v-model="valuexb"
              placeholder="请选择"
              size="large"
              style="width: 240px"
              @change="changebox"
            >
              <el-option
                v-for="item in boxsdata"
                :key="item.v"
                :label="item.l"
                :value="item.v"
              />
            </el-select>
          </div>
        </div>
        <div class="seach-box-bu" @click="sseach">Seach</div>
      </div>
    </div>
    <div class="con-b" v-if="userdatas">
      <div v-for="i in userdatas" :key="i.id">
        <div class="con-b-t">
          <div class="con-b-t-l">
            <div class="con-b-t-l-l">
              <img v-if="i.img.includes('http')" :src="i.img" alt="" />
              <img v-else :src="'http://127.0.0.1:3006' + i.img" alt="" />
            </div>
            <div class="con-b-t-l-r">
              <div class="t">
                {{ i.name }}
                <div class="con-tip">{{ iskai(i.kai) }}</div>
              </div>
              <div class="b">
                性别 <span>{{ i.xb ? "男" : "女" }}</span>
              </div>
            </div>
          </div>
          <div class="con-b-t-r">
            <div class="con-b-t-r-item">
              添加时间 <span>{{ i.createdAt }}</span>
            </div>
          </div>
        </div>
        <div class="con-b-c">
          {{ i.speak }}
        </div>
        <div class="con-b-b">
          <div class="con-b-bu" @click="delesp(i.id)">删除</div>
          <div class="con-b-bu activecolor" @click="s_freeze(i.id, i.kai)">
            {{ i.kai == 3 ? "解冻" : "正常" }}
          </div>
        </div>
      </div>
      <div class="nextcard">
        <div class="pro" :class="{ isdown: offset == 1 }" @click="prev">
          <div class="iconfont icon-jiantou fan"></div>
          上一页
        </div>
        <div class="currentpage">
          第 <span>{{ offset }}</span> 页
        </div>
        <div class="total">
          共 <span>{{ maxpage }}</span> 页
        </div>
        <div class="next" @click="next" :class="{ isdown: offset == maxpage }">
          下一页
          <div class="iconfont icon-jiantou"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getshopperuser, deshopper, unfreezereq, freezereq } from "@/api/index";
import type { getshopuser, boxsdata, addbanderdatatype } from "./type";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";

const userdatas = ref();
const limit = ref<number>(8);
const offset = ref<number>(1);
const count = ref<number>();
const maxpage = ref<number>();
const namekey = ref<string>("");
const boxsdata: boxsdata[] = [
  { l: "冻结用户", v: 3 },
  { l: "正常用户", v: 2 },
  { l: "所有用户", v: 0 },
];
const valuexb = ref(0);
onMounted(() => {
  getuserdata();
});
const sseach = () => {
  ElMessage({
    type: "success",
    message: "搜索成功！",
  });
  offset.value = 1;
  getuserdata();
};
const iskai = (e: string): string => {
  switch (e.toString()) {
    case "1":
      return "审核";
    case "0":
      return "无";
    default:
      return "商家";
  }
};
const getuserdata = async () => {
  const res: getshopuser = await getshopperuser(offset.value, limit.value, {
    namekey: namekey.value,
    valuexb: valuexb.value,
  });
  if (res.code == 200) {
    userdatas.value = res.data.data;
    maxpage.value = res.data.page;
    console.log(res.data);
    count.value = res.data.count;
  }
};
const delesp = async (id: number) => {
  ElMessageBox.confirm("确定要删除吗?", "警告").then(async () => {
    const rudate: addbanderdatatype = await deshopper(id);
    if (rudate.code == 200) {
      ElNotification({
        title: "成功",
        type: "success",
        message: rudate.msg,
        position: "bottom-right",
      });
      getuserdata();
      return;
    }
  });
};
const s_freeze = (id: number, kai: number) => {
  console.log(kai);
  if (kai == 3) {
    return ElMessageBox.confirm("确定要解冻吗?", "警告").then(() => {
      unfreeze(id);
    });
  }
  ElMessageBox.confirm("确定要冻结吗?", "警告").then(() => {
    freeze(id);
  });
};
const unfreeze = async (id: number) => {
  const rudata: addbanderdatatype = await unfreezereq(id);
  if (rudata.code == 200) {
    ElNotification({
      title: "提示",
      type: "success",
      message: rudata.msg,
      position: "bottom-right",
    });
    getuserdata();
    return;
  }
};
const freeze = async (id: number) => {
  const rudata: addbanderdatatype = await freezereq(id);
  if (rudata.code == 200) {
    ElNotification({
      title: "提示",
      type: "success",
      message: rudata.msg,
      position: "bottom-right",
    });
    getuserdata();
    return;
  }
};
const changebox = (e: any) => {
  valuexb.value = e;
  console.log(e);
};
const prev = () => {
  if (offset.value == 1) return;
  offset.value--;
  getuserdata();
};
const next = () => {
  if (offset.value == maxpage.value) return;
  offset.value++;
  getuserdata();
};
</script>

<style scoped lang="scss">
.isdown {
  color: #7b7b7b !important;
  &:hover .iconfont {
    color: #7b7b7b !important;
  }
}
.nextcard {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row !important;
  justify-content: space-around;
  align-items: center;
  font-size: 0.7vw;

  .pro,
  .next {
    cursor: pointer;
    &:hover .iconfont {
      color: var(--them-color);
    }
  }
  > div {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7vw;
    font-weight: 700;
    color: #fff;
    span {
      color: var(--them-color);
      margin: 0 5px;
    }
    .iconfont {
      font-size: 20px;
    }
    .fan {
      transform: rotate(180deg);
    }
  }
}
.zhsjbox {
  height: 100%;
  width: 100%;
  padding: 1vw;

  .con-t {
    height: 150px;
    width: 100%;
    border-radius: 10px;
    padding: 0 20px;
    background-color: #252931;
    border: 1px solid #4c4d4f;

    .con-tit {
      height: 35%;
      color: #fff;
      font-weight: 700;
      font-size: 1vw;
      display: flex;
      align-items: center;
    }
    .seach-box {
      height: 65%;
      display: flex;
      align-items: center;
      gap: 100px;
      .seach-box-bu {
        height: 2vw;
        width: 5vw;
        font-size: 0.8vw;
        color: var(--them-color);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--them-color);
        border-radius: 5px;
        transition: all 0.2s ease-in-out;
        &:hover {
          cursor: pointer;
          // color: var(--them-color2);
          // border: 1px solid var(--them-color2);
          transform: scale(1.01);
        }
      }
      .search-name {
        height: 2vw;
        display: flex;
        align-items: center;
        gap: 1vw;
        .search-name-t {
          height: 100%;
          color: #fff;
          font-size: 0.9vw !important;
          display: flex;
          align-items: center;
        }
        .search-name-b {
          height: 100%;

          :deep(.el-select__wrapper) {
            --el-border-color: var(--them-color);
          }
          :deep(.el-input__wrapper) {
            --el-input-border-color: var(--them-color);
            --el-border-color: var(--them-color2);
          }
          .el-input {
            height: 2vw;
            outline: none;
            border-radius: 3px;
            font-size: 12px;
            border: none;
            padding-left: 10px;
          }
        }
      }
    }
  }
  .con-b {
    margin-top: 20px;
    height: calc(100% - 180px);
    width: 100%;
    border-radius: 5px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.6vw;
    overflow: hidden;
    > div {
      background-color: #252931;
      height: 100%;
      width: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: 10px;
      border: 1px solid #4c4d4f;
      > div {
        overflow: hidden;
      }
      .con-b-t {
        flex: 4;
        padding: 0.1vw 0.5vw;
        display: flex;
        color: #cfd3dc;
        .con-b-t-l {
          flex: 6;
          display: flex;
          padding: 5px 0;
          .con-b-t-l-r {
            height: 100%;
            width: 100%;
            .t {
              color: #fff;
              font-size: 0.8vw;
              font-weight: 700;
              .con-tip {
                font-size: 0.55vw;
                padding: 0.2vw 0.3vw;
                border: 1px solid var(--them-color);
                color: var(--them-color);
                margin-left: 7px;
                border-radius: 2px;
              }
            }
            .b {
              font-size: 0.55vw;
              span {
                color: #fff;
                margin-left: 0.25vw;
              }
            }
            > div {
              height: 50%;
              width: 100%;
              display: flex;
              align-items: center;
            }
          }
          .con-b-t-l-l {
            flex: 4;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            img {
              height: 2.8vw;
              width: 2.8vw;
              border-radius: 50%;
            }
          }
          .con-b-t-l-r {
            flex: 5;
          }
        }
        .con-b-t-r {
          flex: 5;
          display: flex;
          align-items: flex-end;
          justify-content: flex-end;
          font-size: 0.55vw;
          padding: 0.8vw;
          span {
            color: #fff;
            margin-left: 0.3vw;
          }
        }
      }
      .con-b-c {
        flex: 3;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 19px;
        font-size: 0.6vw;
        text-indent: 1em;
        color: #cfd3dc;
        padding: 0 10px;
      }
      .con-b-b {
        flex: 3;
        display: flex;
        .activecolor {
          color: var(--them-color) !important;
        }
        > div {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.7vw;
          font-weight: 700;
          color: #cfd3dc;
          cursor: pointer;
          &:first-child {
            border-bottom-left-radius: 10px;
            border-top: 1px solid #4c4d4f;
            border-right: 1px solid #4c4d4f;
          }
          &:last-child {
            border-bottom-right-radius: 10px;
            border-top: 1px solid #4c4d4f;
          }
          &:hover {
            border: 1px solid var(--them-color);
          }
        }
      }
    }
  }
}
</style>
